<template>
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="请输入任务名称" autofocus v-model.trim="name" @keyup.enter="add" />
  </header>
</template>

<script>
export default {
  // 1.添加 功能  首先 打开 界面 输入框为空
  data() {
    return {
      //  2.设置 name  为空 
      //  2.1给输入框 注册 双向绑定 
      //  2.2 输入框 注册 键盘事件 @keyup.enter 
      //  2.3  父元素 接受 name 并且添加
      name: ''
    }
  },
  methods: {
    //  按键盘 后 把 数据 传给父组件
    add() {
      this.$emit("add", this.name)
      // 然后清空 输入框
      this.name = ""
    }
  }
}
</script>

<style>
</style>